<template>
  <div id="drip">
    <!-- 水滴标题 -->
    <div class="title">水滴</div>

    <!-- 功能按钮 -->
    <div class="button-container">
      <el-button type="primary" @click="showTokenModal">获取token</el-button>
      <el-button type="success" @click="showSendModal">发送信息</el-button>
      <el-button type="danger" @click="clearLog">清理</el-button>
    </div>

    <!-- 请求结果展示 -->
    <div class="response-container">
      <div
        v-for="(response, index) in responseLogs"
        :key="index"
        class="response-log"
      >
        <div><strong>时间戳：</strong>{{ response.timestamp }}</div>
        <div><strong>请求路径：</strong>{{ response.url }}</div>
        <div><strong>返回码：</strong>{{ response.statusCode }}</div>
        <div><strong>返回数据：</strong>{{ response.data }}</div>
      </div>
    </div>

    <!-- 获取token 模态框 -->
    <el-dialog title="获取token" :visible.sync="showTokenDialog">
      <el-form :model="tokenForm">
        <el-form-item label="client_id">
          <el-input v-model="tokenForm.client_id" />
        </el-form-item>
        <el-form-item label="client_secret">
          <el-input v-model="tokenForm.client_secret" />
        </el-form-item>
        <el-form-item label="grant_type">
          <el-input v-model="tokenForm.grant_type" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTokenDialog = false">取消</el-button>
        <el-button type="primary" @click="getToken">获取</el-button>
      </span>
    </el-dialog>

    <!-- 发送信息 模态框 -->
    <el-dialog title="发送信息" :visible.sync="showSendDialog">
      <el-form :model="sendForm">
        <el-form-item label="access_token">
          <el-input
            type="textarea"
            v-model="sendForm.access_tokenString"
            placeholder="每行一个 access_token"
          />
        </el-form-item>

        <el-form-item label="type">
          <el-input v-model="sendForm.type" />
        </el-form-item>
        <el-form-item label="title">
          <el-input v-model="sendForm.title" />
        </el-form-item>
        <el-form-item label="content">
          <el-input v-model="sendForm.content" />
        </el-form-item>
<!--        <el-form-item label="targetType">-->
<!--          <el-input v-model="sendForm.targetType" />-->
<!--        </el-form-item>-->
        <el-form-item>
          <div class="label-left">targetType</div>
          <el-select v-model="sendForm.targetType" placeholder="请选择类型" style="width: 100%;">
            <el-option label="individual" value="individual"></el-option>
            <el-option label="group" value="group"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="targetId">
          <el-input v-model="sendForm.targetId" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSendDialog = false">取消</el-button>
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Drip',
  data () {
    return {
      showTokenDialog: false,
      showSendDialog: false,
      responseLogs: [],

      // 表单数据
      tokenForm: {
        client_id: 'odcp',
        client_secret: 'Yjky-3821m',
        grant_type: 'client_credentials'
      },
    //   方法 2：使用 el-input 的多行输入模拟数组
    // 直接在模态框中使用多行输入，每行对应一个 access_token 值。
      sendForm: {
        access_token: ['string'],
        access_tokenString: 'string', // 用于 textarea
        type: 'text',
        title: 'Drip_test1',
        content: 'Drip_content_test1',
        targetType: 'individual',
        targetId: 'test888'
      }
    }
  },
  methods: {
    // 显示获取token的模态框
    showTokenModal () {
      this.showTokenDialog = true
    },
    // 显示发送信息的模态框
    showSendModal () {
      this.showSendDialog = true
    },
    // 获取token请求
    getToken () {
      axios
        .post(process.env.API_ROOT + '/ns_drip/drip/oidc/oauth/token', this.tokenForm, {
          headers: {
            accept: 'application/json',
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          const log = {
            timestamp: new Date().toLocaleString(),
            url: process.env.API_ROOT + '/ns_drip/drip/oidc/oauth/token',
            statusCode: response.status,
            data: JSON.stringify(response.data, null, 2)
          }
          this.responseLogs.push(log)
          this.showTokenDialog = false
        })
        .catch(error => {
          const log = {
            timestamp: new Date().toLocaleString(),
            url: process.env.API_ROOT + '/ns_drip/drip/oidc/oauth/token',
            statusCode: error.response ? error.response.status : 'N/A',
            data: error.response ? JSON.stringify(error.response.data, null, 2) : '请求失败'
          }
          this.responseLogs.push(log)
        })
    },
    // // 发送信息请求
    // // 方法 2：显式设置 Axios 的请求转换
    // // 可以在请求配置中使用 transformRequest，明确指定序列化逻辑，避免 Axios 自动序列化为字符串。
    // sendMessage () {
    //   const payload = { ...this.sendForm }
    //
    //   axios
    //     .post(process.env.API_ROOT + '/ns_drip/drip/api/iins/notification/notice', payload, {
    //       headers: {
    //         accept: 'application/json',
    //         'Content-Type': 'application/json'
    //       },
    //       transformRequest: [(data) => JSON.stringify(data)]
    //     })
    //     .then(response => {
    //       const log = {
    //         timestamp: new Date().toLocaleString(),
    //         url: process.env.API_ROOT + '/ns_drip/drip/api/iins/notification/notice',
    //         statusCode: response.status,
    //         data: JSON.stringify(response.data, null, 2)
    //       }
    //       this.responseLogs.push(log)
    //       this.showSendDialog = false
    //     })
    //     .catch(error => {
    //       const log = {
    //         timestamp: new Date().toLocaleString(),
    //         url: process.env.API_ROOT + '/ns_drip/drip/api/iins/notification/notice',
    //         statusCode: error.response ? error.response.status : 'N/A',
    //         data: error.response ? JSON.stringify(error.response.data, null, 2) : '请求失败'
    //       }
    //       this.responseLogs.push(log)
    //     })
    // },
    sendMessage () {
      // 将多行字符串转换为数组
      this.sendForm.access_token = this.sendForm.access_tokenString
        ? this.sendForm.access_tokenString.split('\n').map(token => token.trim())
        : []

      axios
        .post(process.env.API_ROOT + '/ns_drip/drip/api/iins/notification/notice', this.sendForm, {
          headers: {
            accept: 'application/json',
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          const log = {
            timestamp: new Date().toLocaleString(),
            url: process.env.API_ROOT + '/ns_drip/drip/api/iins/notification/notice',
            statusCode: response.status,
            data: JSON.stringify(response.data, null, 2)
          }
          this.responseLogs.push(log)
          this.showSendDialog = false
        })
        .catch(error => {
          const log = {
            timestamp: new Date().toLocaleString(),
            url: process.env.API_ROOT + '/ns_drip/drip/api/iins/notification/notice',
            statusCode: error.response ? error.response.status : 'N/A',
            data: error.response ? JSON.stringify(error.response.data, null, 2) : '请求失败'
          }
          this.responseLogs.push(log)
        })
    },
    // 清理日志
    clearLog () {
      this.responseLogs = []
    }
  }
}
</script>

<style scoped>
#drip {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.response-container {
  margin-top: 20px;
}

.response-log {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.response-log div {
  text-align: left;
  margin-bottom: 5px;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

.label-left {
  text-align: left;
  margin-bottom: 4px; /* 可根据需要调整间距 */
}
</style>
